<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
const visible = ref(false);
const showDialog = (position = '') => {
	if (position) {
		initPosition.value = position.split(',');
	} else {
		initPosition.value = [];
	}
	try {
		initMap();
	} finally {
		visible.value = true;
	}
};
const initPosition = ref([]);
const map = shallowRef(null);
const marker = ref(null);
const initMap = () => {
	AMapLoader.load({
		key: '42fe58b9900b0145aa054726568373e2', //此处填入我们注册账号后获取的Key
		version: '2.0', //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等
	})
		.then((AMap) => {
			let center;
			if (initPosition.value && initPosition.value.length > 0) {
				center = initPosition.value;
			} else {
				center = [93.514696, 42.819902];
			}
			map.value = new AMap.Map('container', {
				//设置地图容器id
				viewMode: '3D', //是否为3D地图模式
				zooms: [4, 18], //初始化地图级别范围
				zoom: 13,
				center: center, //初始化地图中心点位置
			});

			// 判断是否有经纬度，有则显示经纬度定位，否则显示实时定位
			if (initPosition.value.length > 0) {
				marker.value = new AMap.Marker({
					position: new AMap.LngLat(initPosition.value[0], initPosition.value[1]),
					title: '',
				});
				map.value.add(marker.value);
			} else {
				AMap.plugin('AMap.Geolocation', () => {
					const geolocation = new AMap.Geolocation({
						// 是否使用高精度定位，默认：true
						enableHighAccuracy: true,
						//是否使用安卓定位sdk用来进行定位，需要安卓端sdk配合
						useNative: true,
						// 设置定位超时时间，默认：无穷大
						timeout: 10000,
						needAddress: true,
					});

					geolocation.getCurrentPosition((status, result) => {
						//获取用户当前的精确位置
						if (status == 'complete') {
							const pos = new AMap.LngLat(result.position.lng, result.position.lat);
							marker.value = new AMap.Marker({
								position: pos,
								title: '',
							});
							map.value.add(marker.value);
							map.value.setCenter(pos);
						} else {
							geolocation.getCityInfo((status, result) => {
								//只能获取当前用户所在城市和城市的经纬度
								if (status == 'complete') {
									const pos = new AMap.LngLat(result.position[0], result.position[1]);
									marker.value = new AMap.Marker({
										position: pos,
										title: '',
									});
									map.value.add(marker.value);
									map.value.setCenter(pos);
								} else {
									showFailToast('定位失败');
								}
							});
						}
					});
				});
			}

			// 添加点击事件监听，点击地图选择位置
			map.value.on('click', (e) => {
				if (marker.value) {
					marker.value.setPosition(e.lnglat);
				} else {
					marker.value = new AMap.Marker({
						position: e.lnglat,
						title: '',
					});
					map.value.add(marker.value);
				}
			});
		})
		.catch((e) => {
			showFailToast(e);
		});
};

// 取消
const handleCancle = () => {
	if (marker.value) {
		map.value.remove(marker.value);
	}
	if (map.value) {
		map.value.destroy();
	}
	visible.value = false;
};
const emit = defineEmits(['select']);
// 确定
const handleSure = () => {
	let position = '';
	if (marker.value) {
		position = marker.value._position.lng + ',' + marker.value._position.lat;
		map.value.remove(marker.value);
	}
	emit('select', position);
	if (map.value) {
		map.value.destroy();
	}

	visible.value = false;
};
defineExpose({
	showDialog,
});
</script>
<template>
	<van-action-sheet class="map-popup" v-model:show="visible" title="位置选择" :closeable="false" :close-on-click-overlay="false">
		<div class="content">
			<div class="map" id="container"></div>
			<div class="operate">
				<div><van-button type="default" size="small" @click="handleCancle()">取消</van-button></div>
				<div><van-button type="primary" size="small" @click="handleSure()">确定</van-button></div>
			</div>
		</div>
	</van-action-sheet>
</template>
<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
}

.operate {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;

	.van-button {
		width: 100px;

		&:first-child {
			margin-right: 20px;
		}
	}
}

.map {
	width: 100%;
	height: calc(100% - 50px);
}
</style>
